<script setup>
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { Menu as IconMenu, Close } from '@element-plus/icons-vue'
import HomePage from './views/HomePage.vue'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

const { locale, t } = useI18n()
const route = useRoute()
const isMenuOpen = ref(false)

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}

// 监听语言变化，更新meta标签
watch(locale, (newLocale) => {
  updateMetaTags(newLocale)
})

// 监听路由变化，更新meta标签
watch(() => route.path, (newPath) => {
  updateMetaTags(locale.value)
  closeMenu() // 路由变化时关闭菜单
})

// 更新meta标签
const updateMetaTags = (lang) => {
  const title = document.querySelector('title')
  const metaDescription = document.querySelector('meta[name="description"]')
  const canonicalLink = document.querySelector('link[rel="canonical"]')
  const alternateLinks = document.querySelectorAll('link[rel="alternate"][hreflang]')

  // 更新标题
  if (title) {
    title.textContent = `${route.meta.title || 'B2B Cross Border'} - ${lang.toUpperCase()}`
  }

  // 更新描述
  if (!metaDescription) {
    const meta = document.createElement('meta')
    meta.name = 'description'
    meta.content = route.meta.description || 'Professional flexible packaging solutions for global customers'
    document.head.appendChild(meta)
  } else {
    metaDescription.content = route.meta.description || 'Professional flexible packaging solutions for global customers'
  }

  // 更新规范链接
  const canonicalUrl = `${window.location.origin}${route.path}`
  if (!canonicalLink) {
    const link = document.createElement('link')
    link.rel = 'canonical'
    link.href = canonicalUrl
    document.head.appendChild(link)
  } else {
    canonicalLink.href = canonicalUrl
  }

  // 更新替代语言链接
  const supportedLocales = ['en', 'zh', 'ja', 'ko']
  alternateLinks.forEach(link => link.remove())
  supportedLocales.forEach(locale => {
    const link = document.createElement('link')
    link.rel = 'alternate'
    link.hreflang = locale
    link.href = `${window.location.origin}/${locale}${route.path}`
    document.head.appendChild(link)
  })

  // 添加x-default链接
  const xDefaultLink = document.createElement('link')
  xDefaultLink.rel = 'alternate'
  xDefaultLink.hreflang = 'x-default'
  xDefaultLink.href = `${window.location.origin}${route.path}`
  document.head.appendChild(xDefaultLink)
}

// 初始化meta标签
updateMetaTags(locale.value)
</script>

<template>
  <el-header class="main-header" height="64px">
    <el-row class="header-row" justify="center" align="middle">
      <el-col :xs="6" :sm="4" :md="3" class="logo-col">
        <router-link to="/" class="logo">
          <el-text tag="b" type="primary">B2B Cross Border</el-text>
        </router-link>
      </el-col>

      <el-col :xs="0" :sm="16" :md="18" class="nav-col">
        <el-menu 
          mode="horizontal" 
          :default-active="$route.path" 
          class="main-menu"
          :collapse="isMenuOpen"
          @select="closeMenu">
          <el-menu-item index="/">{{ $t('header.nav.home') }}</el-menu-item>
          <el-menu-item index="/production-capability">{{ $t('header.nav.production') }}</el-menu-item>
          <el-menu-item index="/product-categories">{{ $t('header.nav.products') }}</el-menu-item>
          <el-menu-item index="/package-designer">{{ $t('header.nav.design') }}</el-menu-item>
          <el-menu-item index="/factory-certifications">{{ $t('header.nav.certifications') }}</el-menu-item>
          <el-menu-item index="/contact-us">{{ $t('header.nav.contact') }}</el-menu-item>
        </el-menu>
      </el-col>

      <el-col :xs="18" :sm="6" :md="4" class="action-col">
        <div class="header-actions">
          <language-switcher class="lang-switcher" />
          <el-button
            class="menu-toggle"
            @click="toggleMenu"
            :icon="isMenuOpen ? Close : IconMenu"
            circle
            plain
          />
        </div>
      </el-col>
    </el-row>
  </el-header>

  <!-- 移动端抽屉菜单 -->
  <el-drawer 
    v-model="isMenuOpen" 
    direction="ltr" 
    size="75%" 
    class="mobile-menu-drawer"
    :with-header="false">
    <el-menu 
      :default-active="$route.path"
      @select="closeMenu">
      <el-menu-item index="/">{{ $t('header.nav.home') }}</el-menu-item>
      <el-menu-item index="/production-capability">{{ $t('header.nav.production') }}</el-menu-item>
      <el-menu-item index="/product-categories">{{ $t('header.nav.products') }}</el-menu-item>
      <el-menu-item index="/package-designer">{{ $t('header.nav.design') }}</el-menu-item>
      <el-menu-item index="/factory-certifications">{{ $t('header.nav.certifications') }}</el-menu-item>
      <el-menu-item index="/contact-us">{{ $t('header.nav.contact') }}</el-menu-item>
    </el-menu>
  </el-drawer>
  
  <el-container class="app-container">
    <el-header class="main-header" height="64px">
      <!-- 保持原有header内容不变 -->
    </el-header>

    <el-main class="main-content">
      <div class="content-wrapper">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" class="view-container" />
          </transition>
        </router-view>
      </div>
    </el-main>

    <el-footer height="80px" class="main-footer">
      <div class="footer-content">
        <language-switcher />
        <el-text class="copyright" type="info">
          © 2025 B2B Cross Border. All rights reserved.
        </el-text>
      </div>
    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">
@use "@/styles/variables" as vars;

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  
  .header-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--el-menu-base-level-padding);
  }

  .logo-col {
    display: flex;
    align-items: center;
    
    .logo {
      text-decoration: none;
      
      :deep(.el-text) {
        font-size: 1.25rem;
      }
    }
  }

  .main-menu {
    border-bottom: none;
    justify-content: center;
    
    :deep(.el-menu-item) {
      font-size: 1rem;
      transition: all 0.3s var(--el-transition-function-ease-in-out-bezier);
      
      &.is-active {
        color: var(--el-color-primary) !important;
        border-bottom: 2px solid var(--el-color-primary);
      }
      
      &:not(.is-active):hover {
        background: var(--el-color-primary-light-9);
      }
    }
  }

  .action-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding-right: 1rem;

    .header-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .menu-toggle {
      display: none;
      margin-left: 0.5rem;
    }
  }
}

/* 移动端响应式 - 使用Element Plus断点变量 */
@media screen and (max-width: #{vars.$ep-sm}) {
  .main-header {
    .nav-col {
      display: none;
    }

    .action-col {
      .menu-toggle {
        display: flex;
        margin-left: auto;
      }
    }
  }

  /* 侧边抽屉菜单 */
  .mobile-menu-drawer {
    :deep(.el-drawer__header) {
      margin-bottom: 0;
      padding: 1rem;
      border-bottom: 1px solid var(--el-border-color-light);
    }

    :deep(.el-drawer__body) {
      padding: 0;
      
      .el-menu {
        border-right: none;
        
        .el-menu-item {
          height: 48px;
          line-height: 48px;
          font-size: 0.9rem;
          
          &.is-active {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9);
          }
        }
      }
    }
  }
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
